<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlowZone 流境 - 专注于当下，成就更好的自己</title>
    <meta name="description" content="FlowZone流境 - 集成白噪音、番茄钟和任务管理的现代化生产力工具，帮助你进入心流状态，提升工作效率。">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="hero">
        <nav class="nav-container">
            <div class="logo">
                <img src="../icons/icon_32_32.png" alt="FlowZone Logo" height="32">
                <span>FlowZone</span>
            </div>
            <div class="nav-links">
                <a href="#features">特性</a>
                <a href="#benefits">优势</a>
                <a href="#scenarios">场景</a>
                <a href="#start" class="cta-button">立即开始</a>
            </div>
        </nav>
        <div class="hero-content">
            <h1>FlowZone 流境</h1>
            <p class="subtitle">沉浸专注，优化工作流</p>
            <p class="description">
                在信息爆炸的时代，找到专注的平静
            </p>
            <div class="cta-group">
                <a href="#start" class="primary-button">免费体验</a>
                <a href="#learn-more" class="secondary-button">了解更多</a>
            </div>
        </div>
    </header>

    <main>
        <section id="features" class="features">
            <h2>核心特性</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🎵</div>
                    <h3>沉浸式白噪音</h3>
                    <p>精选多种场景音效，从雨声到咖啡厅，营造专属于你的专注空间</p>
                    <ul>
                        <li>自然音效库</li>
                        <li>场景混音</li>
                        <li>智能音量</li>
                        <li>情境保存</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⏱️</div>
                    <h3>智能番茄钟</h3>
                    <p>科学的时间管理方法，让工作和休息完美平衡</p>
                    <ul>
                        <li>25/5工作法</li>
                        <li>自定义时长</li>
                        <li>智能提醒</li>
                        <li>数据统计</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📝</div>
                    <h3>任务管理系统</h3>
                    <p>简洁而强大的任务管理，让目标清晰可见</p>
                    <ul>
                        <li>优先级管理</li>
                        <li>时间估算</li>
                        <li>分类标签</li>
                        <li>进度追踪</li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="benefits" class="benefits">
            <h2>为什么选择 FlowZone？</h2>
            <div class="benefits-grid">
                <div class="benefit-item">
                    <h3>🎯 提升专注力</h3>
                    <p>通过科学的方法和工具，帮助你进入并保持专注状态</p>
                </div>
                <div class="benefit-item">
                    <h3>⚡ 效率倍增</h3>
                    <p>整合多种生产力工具，让工作流程更顺畅</p>
                </div>
                <div class="benefit-item">
                    <h3>📊 数据洞察</h3>
                    <p>直观的数据统计，帮助你了解并优化工作方式</p>
                </div>
                <div class="benefit-item">
                    <h3>🔒 数据安全</h3>
                    <p>本地优先的数据存储，保护你的隐私</p>
                </div>
            </div>
        </section>

        <section id="scenarios" class="scenarios">
            <h2>适用场景</h2>
            <div class="scenario-cards">
                <div class="scenario-card">
                    <img src="images/work.jpg" alt="工作场景">
                    <h3>专注工作</h3>
                    <p>在办公室创造专属的专注空间</p>
                </div>
                <div class="scenario-card">
                    <img src="images/study.jpg" alt="学习场景">
                    <h3>高效学习</h3>
                    <p>为考试备考提供理想的学习环境</p>
                </div>
                <div class="scenario-card">
                    <img src="images/create.jpg" alt="创作场景">
                    <h3>创意创作</h3>
                    <p>激发灵感，进入创作心流状态</p>
                </div>
            </div>
        </section>

        <section id="start" class="start-section">
            <h2>开启你的专注之旅</h2>
            <p>现在就体验 FlowZone，找到属于你的专注节奏</p>
            <a href="#" class="primary-button">立即开始</a>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <img src="../icons/icon_32_32.png" alt="FlowZone Logo" height="32">
                <span>FlowZone</span>
            </div>
            <div class="footer-links">
                <div class="footer-column">
                    <h4>产品</h4>
                    <a href="#features">功能特性</a>
                    <a href="#benefits">产品优势</a>
                    <a href="#scenarios">使用场景</a>
                </div>
                <div class="footer-column">
                    <h4>资源</h4>
                    <a href="#">使用指南</a>
                    <a href="#">常见问题</a>
                    <a href="#">更新日志</a>
                </div>
                <div class="footer-column">
                    <h4>关于</h4>
                    <a href="#">关于我们</a>
                    <a href="#">联系方式</a>
                    <a href="#">隐私政策</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 FlowZone 流境. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
